<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" v-model="title" />
    <input type="text" v-model="title" />
    <h3 v-bind="title">更新值</h3>
    <script>
        function factoral(num) {
            return num == 1 ? 1 : num * factoral(num - 1);
        }
        let proxy = new Proxy(factoral, { // factoral 代理的对象
            apply(func, obj, args) { // obj上下文 apply传的{}
                // args 传入的值 [5]
                console.log(func)
                console.log(func.apply(this, args));
            }
        })
        proxy.apply({}, [5]);


        const lessons = [
            {
                title: 'jsDemo',
                category: 'js'
            },
            {
                title: 'cssDemo',
                category: 'css'
            }, {
                title: 'htmlDemo',
                category: 'html'
            }
        ]

        let proxy1 = new Proxy(lessons, {
            get(arr, key) {
                const title = arr[key].title;
                let len = 3;
                arr[key].title = title.length > len ? title.substr(0, len) + '.'.repeat(3) : title;
                return arr[key];
            }
        })
        console.log(proxy1[2])
        // 数据双向绑定
        function View() {
            let proxy2 = new Proxy({}, {
                get(obj, property) {

                },
                set(obj, property, value) {
                    document.querySelectorAll(`[v-model="${property}"]`)
                        .forEach(item => {
                            item.value = value;
                        })
                    document.querySelectorAll(`[v-bind="${property}"]`)
                        .forEach(item => {
                            item.innerHTML = value;
                        })
                }
            })
            this.init = function () {
                const els = document.querySelectorAll('[v-model]');
                els.forEach(item => {
                    item.addEventListener('keyup', function () {
                        proxy2[this.getAttribute('v-model')] = this.value;
                    })
                })
            }
        }
        new View().init()
    </script>
</body>

</html>